<template>
  <div class="text-sm dark:text-[#fff]">
    <div
      class="flex items-center justify-between p-1.5 bg-[#f2f2f2] dark:bg-[#2a74d0]"
    >
      <span class="font-bold">患者信息</span>
      <span
        class="bg-[#2b9939] text-zinc-100 p-[6px] text-sm"
        @click="handleBack"
        >返回</span
      >
    </div>
    <m-row
      :list="[
        { name: '姓名', value: checkLisDetail?.fhz_name },
        { name: '性别', value: checkLisDetail?.fsex },
        { name: '编号', value: checkLisDetail?.fhz_id }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '年龄', value: checkLisDetail?.fage },
        { name: '电话', value: checkLisDetail?.fhz_tel }
      ]"
    ></m-row>
    <div class="flex items-center p-2 bg-[#f2f2f2] dark:bg-[#2a74d0]">
      <span class="font-bold">检查信息</span>
    </div>
    <m-row
      :list="[
        { name: '检验仪器', value: checkLisDetail?.fjy_instr },
        { name: '样本日期', value: checkLisDetail?.fjy_date },
        { name: '样本号', value: checkLisDetail?.fjy_yb_code }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '审核医师', value: checkLisDetail?.fcheckerName },
        { name: '样本类型', value: checkLisDetail?.fybtypeName },
        { name: '审核时间', value: checkLisDetail?.fcheck_time }
      ]"
    ></m-row>
    <m-row
      :list="[
        { name: '申请科室', value: checkLisDetail?.fdeptName },
        { name: '申请医生', value: checkLisDetail?.fdoctorName },
        { name: '床位号', value: checkLisDetail?.fhz_bed }
      ]"
    ></m-row>
    <div
      class="p-1.5 flex justify-between bg-[#f2f2f2] items-center dark:bg-[#2a74d0]"
    >
      <span class="font-bold">检验结果:</span>
      <span class="bg-[#2b9939] text-zinc-100 p-0.5 rounded-sm cursor-pointer"
        >PDF报告</span
      >
    </div>
    <div v-if="checkLisDetail?.samJYResults">
      <easy-data-table
        ref="easyTableRef"
        theme-color="#2a74d0"
        :table-class-name="
          themeClassName === 'dark' ? 'customize-table-dark' : ''
        "
        :loading="isLoading"
        :headers="headers"
        :items="checkLisDetail?.samJYResults"
        show-index
      ></easy-data-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import type { Header } from 'vue3-easy-data-table'
import checkLisServer from './service/index'
import themeUtil from '@/utils/themeUtil'

const router = useRouter()
const { themeClassName } = themeUtil
const { checkLisDetail, findCheckLisDetail, isLoading } = checkLisServer
const easyTableRef = ref(null)
findCheckLisDetail()
const headers: Header[] = [
  { text: '检验项目', value: 'fitem_code', width: 20 },
  { text: '项目名称', value: 'fitem_name', width: 100 },
  { text: '检验结果', value: 'fvalue' },
  { text: '单位', value: 'fitem_unit' },
  { text: '参考范围', value: 'fitem_ref' },
  { text: '标识', value: 'fitem_badge', sortable: true }
]
const handleBack = () => {
  router.back()
}
</script>
<style>
.customize-table-dark {
  --easy-table-border: 1px solid #445269;
  --easy-table-row-border: 1px solid #445269;

  /* --easy-table-header-font-size: 14px; */
  /* --easy-table-header-height: 50px; */
  --easy-table-header-font-color: #c1cad4;
  --easy-table-header-background-color: #212124;

  /* --easy-table-header-item-padding: 10px 15px; */

  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #4c5d7a;

  --easy-table-body-row-font-color: #c0c7d2;
  --easy-table-body-row-background-color: #212124;
  /* --easy-table-body-row-height: 50px; */
  /* --easy-table-body-row-font-size: 14px; */

  --easy-table-body-row-hover-font-color: #212124;
  --easy-table-body-row-hover-background-color: #eee;

  /* --easy-table-body-item-padding: 10px 15px; */

  --easy-table-footer-background-color: #212124;
  --easy-table-footer-font-color: #c0c7d2;
  /* --easy-table-footer-font-size: 14px; */
  /* --easy-table-footer-padding: 0px 10px; */
  /* --easy-table-footer-height: 50px; */

  /* --easy-table-rows-per-page-selector-width: 70px; */
  /* --easy-table-rows-per-page-selector-option-padding: 10px; */
  --easy-table-rows-per-page-selector-z-index: 1;

  --easy-table-scrollbar-track-color: #212124;
  --easy-table-scrollbar-color: #212124;
  --easy-table-scrollbar-thumb-color: #4c5d7a;
  --easy-table-scrollbar-corner-color: #212124;

  --easy-table-loading-mask-background-color: #212124;
}
</style>
